<script setup lang="ts">
import {markRaw, reactive, readonly, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs} from "vue";

let obj = reactive({
  age: 10,
  msg: {
    num: 0
  }
})
// readonly 与 shallowReadonly
let obj_1 = readonly(obj)//只读
let obj_2 = shallowReadonly(obj)

function change() {
  // obj.age++
  // console.log(obj.age)
  // obj_1.age++
  // obj_1.msg.num++
  console.log(obj_1)
  console.log(obj_1.age)
  console.log(obj_2)
  // obj_2.age++
  obj_2.msg.num++
}

// shallowReactive  声明浅响应式数据
// shallowRef: shallowRef 包装一个对象时，对该对象内部属性的修改不会被监听，只有重新赋值整个对象的操作才会引起响应式更新。
// let ls = reactive({
// let ls = shallowReactive({
let ls = shallowRef({
  age: 18,
  sex: '男',
  msg: {
    num: 0
  }
})

function changeLs() {
  // ls.age++
  // ls.msg.num++//不是响应式
  // console.log(ls.msg.num)
  // ls.value.age++
  // console.log(ls.value.age)
  // ls.value.msg.num++
  // console.log(ls.value.msg.num)
  ls.value = {age: 100, msg: {num: 200}}
}

// toRaw 将响应式数据转为非响应式数据
// 与 markRaw 使其永远不会被转换为响应式对象
let zs = reactive({
  name: '张三',
  data: {
    msg: '信息'
  }
})
// let zsN = toRaw(zs)
let zsN = markRaw({
  name: '张三',
  data: {
    msg: '信息'
  }
})
let zsNN = reactive(zsN)

function changeZS() {
  // zsN.name = '李四'

  zsNN.name = '李四'
  console.log(zsN, 'zsN')
}

// toRef 与 toRefs
let cat = reactive({
  name: 'duo',
  age: 1
})
// let name = cat.name

let {name, age} = toRefs(cat)
let name1 = toRef(cat, 'name')

function getCat() {
  console.log(name)
  // name.value = '多多'
  // name='多多'
  // age.value = 2
  name1.value = '多多'
  console.log(name1, 'name1')
}
</script>

<template>
  组合式api
  obj.age:{{ obj.age }}
  {{ obj_1.age }}num:{{ obj_2.msg.num }}
  <button @click="change">change</button>
  <br>
  ls:{{ ls.age }}--{{ ls.msg.num }}
  <button @click="changeLs">changeLs</button>
  zsN:{{ zsN.name }}
  zsNN:{{ zsNN.name }}
  <button @click="changeZS">changeZS</button>
  {{ name }}{{ age }}--{{name1}}
  <button @click="getCat">getCat</button>
</template>

<style scoped>

</style>
